<template>
    <div class="m-steps-area" :style="`width: 100%;`">
        <div class="m-steps">
            <div
                :class="[
                    'm-steps-item',
                    {
                        finished: currentStep > index,
                        process: currentStep === index,
                        'middle-wait': currentStep < index,
                        active: activeIndex === index,
                    },
                ]"
                v-for="(item, index) in stepsLabel"
                :key="index"
            >
                <div class="m-info-wrap" @click="onChange(index)">
                    <div class="m-steps-icon">
                        <img
                            class="u-icon"
                            v-if="currentStep < index"
                            :src="
                                require(`../../../../../assets/img/qzjx/${item.img}1.svg`)
                            "
                            alt=""
                        />
                        <!-- <span class="u-icon" v-if="currentStep < index">{{
                            index
                        }}</span> -->
                        <img
                            class="u-icon"
                            v-if="currentStep == index"
                            :src="
                                require(`../../../../../assets/img/qzjx/${item.img}2.svg`)
                            "
                            alt=""
                        />
                        <!-- <span class="u-icon" v-if="currentStep == index"
                            >进行中</span
                        > -->
                        <img
                            class="u-icon"
                            v-if="currentStep > index"
                            :src="
                                require(`../../../../../assets/img/qzjx/${item.img}3.svg`)
                            "
                            alt=""
                        />
                        <!-- <svg
                            class="u-icon"
                            v-if="currentStep > index"
                            viewBox="64 64 896 896"
                            data-icon="check"
                            aria-hidden="true"
                            focusable="false"
                        >
                            <path
                                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
                            ></path>
                        </svg> -->
                    </div>
                    <div class="m-steps-content">
                        <div class="u-steps-title" v-html="item.name"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Steps',
    props: {
        stepsLabel: {
            // 步骤标题数组
            type: Array,
            default: () => {
                return []
            },
        },
        currentStep: {
            // 当前选中的步骤
            type: Number,
            default: 1,
        },
        activeIndex:{
            // 当前高亮的内容
            type: Number,
            default: 1,
        }
    },
    data() {
        return {
            // 若当前选中步骤超过总步骤数，则默认选择步骤1
            current: this.currentStep,
        }
    },
    methods: {
        onChange(index) {
            // 点击切换选择步骤
            // e.stopPropagation()
            this.$emit('change', index)
        },
    },
}
</script>
<style lang="less" scoped>
@themeColor: #1890ff;

.m-steps-area {
    margin: 44px auto 0;
    background: #fff;

    .m-steps {
        padding: 10px 10px 0;
        display: flex;

        .m-steps-item {
            display: inline-block;
            font-size: 12px;
            line-height: 22px;
            flex: 1;
            text-align: center;

            &:not(:last-child) {
                margin-right: 16px;
            }
            &.active .m-info-wrap{
                border-bottom: 2px solid #1990FF;
            }
            .m-info-wrap {
                display: inline-block;
                cursor: pointer;

                .m-steps-icon {
                    display: inline-block;
                    text-align: center;
                    z-index: 99;
                    position: relative;
                    .u-icon {
                        width: 40px;
                        height: 40px;
                    }
                }

                .m-steps-content {
                    display: inline-block;
                    vertical-align: top;

                    .u-steps-title {
                        position: relative;
                        display: inline-block;
                        color: #909db6;
                        padding-bottom: 10px;
                        &:after {
                            background: #e4e5e6;
                            position: absolute;
                            top: -25px;
                            left: 52px;
                            display: block;
                            width: 36px;
                            height: 2px;
                            content: '';
                            z-index: 1;
                        }
                    }

                    .u-steps-description {
                        font-size: 14px;
                        word-wrap: break-word;
                    }
                }
            }

            &:last-child {
                .m-steps-content .u-steps-title:after {
                    background: transparent !important;
                }
            }
        }

        .finished {
            .m-steps-content {
                .u-steps-title {
                    color: #1990ff !important;
                    &:after {
                        background: #ff9f24;
                    }
                }
            }
        }

        .process {
            .m-steps-content {
                .u-steps-title {
                    color: #1990ff !important;
                }
            }
        }
    }
}
</style>
